<template>
	<view class="login-page">
		<view class="login-form">
			<view class="login-title">
				儿童呼吸GPT平台
			</view>
			<view class="login-title">
				(患者端)
			</view>
			<view class="login-nav">
				<text class="nav-box" :class="isActive === 0? 'active' : ''" @click="isActive = 0">账号密码登录</text>
				<text class="nav-box" :class="isActive === 1? 'active' : ''" @click="isActive = 1">验证码登录</text>
			</view>
			<view class="form-box">
				<u--input placeholder="手机号" v-model="loginForm.telPhone" prefixIcon="account"
					:prefixIconStyle="inputStyle"></u--input>
				<u--input style="margin-top: 20rpx;" v-model="loginForm.password" v-show="isActive=== 0"
					placeholder="登录密码" password prefixIcon="lock-open" :prefixIconStyle="inputStyle"></u--input>
				<u-input style="margin-top: 20rpx;" v-model="loginForm.validCode" v-show="isActive=== 1"
					placeholder="输入验证码" prefixIcon="lock" :prefixIconStyle="inputStyle">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="reguest-box">
				<text style="color: #54b6ab;" @click="getInRegister">注册账号</text>
			</view>
			<view class="footer-btn">
				<u-button text="登 录" @click="login" shape="circle" class="custom-style"></u-button>
				<u-button text="微信登录" @click="wxLogin" icon="weixin-fill" shape="circle" plain
					style="margin-top: 20rpx;color: #54b6ab;border: 1rpx solid #54b6ab;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputStyle: 'font-size: 22px;color: #54b6ab;font-weight: bold;',
				isActive: 0,
				loginForm: {
					role: 1,
					telPhone: '',
					password: '',
					validCode: null
				},
				tips: null
			};
		},

		onShow() {
			this.$store.commit('setUser', null);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			//注册
			getInRegister() {
				uni.navigateTo({
					url: '/pages/register'
				})
			},
			//获取验证码
			getCode() {
				if (!this.loginForm.telPhone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
				}
				if (this.$refs.uCode.canGetCode) {
					let obj = {
						telPhone: this.loginForm.telPhone,
						type: 1,
						role:1
					}
					uni.$http.post('/system/getVerificationCode', obj).then(res => {
						if (res.data.code === 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.showToast({
								icon: 'none',
								title: '验证码已发送'
							})
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

						}
					})
				} else {
					uni.$u.toast('1分钟以内只能发送一次');
				}

			},
			
			//登录
			login() {
				//判断是账号密码 还是验证码登录
				if (!this.isActive) {
					if (!this.loginForm.telPhone || !this.loginForm.password) {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号和密码'
						})
					}
					//账号密码登陆
					uni.$http.post('/user/accountLogin', this.loginForm).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								icon: 'loading',
								title: '登录成功'
							})
							
							uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo))
							uni.setStorageSync('token', res.data.data.token)
							//通知websocket连接
							this.$store.commit('setUser', res.data.data.userInfo.id);
							
							setTimeout(() => {
								this.loginForm = {
									role: 1,
									telPhone: null,
									password: null,
									validCode: null
								}
								uni.navigateTo({
									url: '/pages/userFirst'
								})
							}, 700)
						}
					})

				} else {
					if (!this.loginForm.telPhone || !this.loginForm.validCode) {
						return uni.showToast({
							icon: 'none',
							title: '请输入手机号和验证码'
						})
					}
					//账号验证码登陆
					uni.$http.post('/user/validCodeLogin', this.loginForm).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								icon: 'loading',
								title: '登录成功'
							})
							//通知websocket连接
							this.$store.commit('setUser', res.data.data.userInfo.id);
							uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo))
							uni.setStorageSync('token', res.data.data.token)
							setTimeout(() => {
								this.loginForm = {
									role: 1,
									telPhone: null,
									password: null,
									validCode: null
								}
								uni.navigateTo({
									url: '/pages/userFirst'
								})
							}, 700)
						}
					})
				}
			},
			//微信登录
			wxLogin() {
				uni.showToast({
					icon: 'none',
					title: '暂无功能'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #54b6ab;

		.login-form {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 100rpx 30rpx;
			box-sizing: border-box;

			.login-title {
				width: 100%;
				text-align: center;
				font-size: 34rpx;
				color: #000;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.login-nav {
				margin: 50rpx auto;
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;

				.nav-box {
					width: inherit;
					padding: 10rpx 20rpx;
					border-bottom: 5rpx solid #c4c4c4;
					text-align: center;
					font-weight: bold;
					color: #999;
				}

				.active {
					transition: 1s ease;
					color: #606266;
					border-color: #54b6ab;
				}
			}

			.form-box {
				/deep/.u-input {
					background-color: #f1f5f8;
					border: none;
				}

				/deep/.uni-input-placeholder {
					font-size: 22rpx;
				}

				/deep/.uni-input-input {
					font-size: 22rpx;
				}
			}

			.reguest-box {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.footer-btn {
				width: 100%;

				.custom-style {
					background-color: #54b6ab;
					color: #fff;
				}

				/deep/.u-icon__icon--info {
					color: #54b6ab;
				}
			}
		}
	}
</style>